<template>
	<view class="container">
		<!-- banner -->
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper class="swiper" style="height: 450rpx;" circular="true" indicator-dots="true" autoplay="true" interval="3500"
						duration="600">
						<swiper-item class="swiper-list" v-for="(item, index) in formData.imageUrlList" :key="index">
							<view class="swiper-item uni-bg-red">
								<image class="swiper-img" :src="item" mode="aspectFill"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
		<view class="padding radius bg-white">
			<view class="flex justify-between">
				<view class="text-bold text-lg text-black">{{ formData.petName }}</view>
				<view class="text-gray text-sm">
					<text>{{ formData.petLostCollectNum }}人收藏</text>
				</view>
			</view>
			<view class="bg-gray padding margin-top-sm radius">
				<view style="font-size: 25rpx;">
					<u-icon name="error-circle-fill" style="margin-right: 5rpx;"></u-icon>
					{{ formData.postType === 0 ? '寻找爱宠' : '寻找主人' }}
				</view>
				<view style="font-size: 25rpx;" v-if="formData.petBreed === 0">
					<u-icon name="bell-fill" style="margin-right: 5rpx;"></u-icon>狗狗
				</view>
				<view style="font-size: 25rpx;" v-if="formData.petBreed === 1">
					<u-icon name="bell-fill" style="margin-right: 5rpx;"></u-icon>猫猫
				</view>
				<view style="font-size: 25rpx;" v-if="formData.petBreed === 2">
					<u-icon name="bell-fill" style="margin-right: 5rpx;"></u-icon>其他
				</view>
				<view style="font-size: 25rpx;">
					<u-icon name="clock-fill" style="margin-right: 5rpx;"></u-icon>
					{{ formData.lostTime }}
				</view>
				<view style="font-size: 25rpx;">
					<u-icon name="map-fill" style="margin-right: 5rpx;"></u-icon>
					{{ formData.lostAddress }}
				</view>
			</view>
			<view style="font-size: 70rpx; color: darkgray;">
				“
			</view>
			<view style="margin-top: -40rpx;">
				<text class="text-black text-bold">{{ formData.description }}</text>
			</view>
			<view>
				<text style="color: orange; font-size: 22rpx;">*提醒：在未见到自己丢失的宠物前，如有人向你索要酬金，切勿付款！请务必联系审核员核实，以免被骗。</text>
			</view>
		</view>
		
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">联系人</text>
				<text class="text-ABC text-blue">information</text>
			</view>
			<view class="action text-gray" @tap="goToReport(formData.creator)">
				<view class="cuIcon-warnfill"></view>举报
			</view>
		</view>
		<view class="bg-white padding-lr padding-bottom text-df">
			<view class="u-flex">
				<view class="u-m-r-10">
					<u-avatar :src="pic" size="90"></u-avatar>
				</view>
				<view class="u-flex-1">
					<view class="u-font-18 u-p-b-20">{{ formData.contactName }}</view>
					<view class="u-font-14 u-tips-color" v-if="formData.showPhone === 1">联系人电话:{{ formData.contactPhone }}</view>
					<view class="u-font-14 u-tips-color">微信号:{{ formData.contactWechat }}</view>
				</view>
			</view>
		</view>
		
		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">评论</text>
				<text class="text-ABC text-blue">comment</text>
			</view>
		</view>
		<view class="bg-white padding-lr padding-bottom text-df">
			<comment ref="commentRef"></comment>
		</view>
		
		<view style="height: 150rpx; width: 1rpx;"></view>
		
		<view class="cu-bar bg-white tabbar border shop solid-top" style="position: fixed; bottom: 0;width: 100%; z-index: 9999;">
			<view class="action text-orange" @tap="collectOrCancelPetLost(formData.id)">
				<view :class="this.isCollect ? 'cuIcon-favorfill' : 'cuIcon-favor'"></view>{{ this.isCollect ? '已收藏' : '未收藏' }}
			</view>
			<view class="btn-group">
				<button open-type="contact" style="width: 80%;" class="cu-btn bg-gradual-blue round shadow-blur" @tap="goToUpdateSeeking(formData.id)">修改信息</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	import comment from '../comment/comment.vue'
	import {
		getPetLostDetailById,
		collectPetLost,
		cancelCollectPetLost
	} from '@/api/release/seekingPetsDetail.js'
	export default {
		data() {
			return {
				formData: {},
				isCollect: false
			}
		},
		components: {
			comment
		},
		onLoad(option) {
			this.getData(option.id)
			this.callCommentSearchData(option.id)
		},
		onShow() {
			var that = this;
		},
		methods: {
			getData(id){
				getPetLostDetailById(id).then(res => {
					if (res.code == 0) {
						this.formData = res.data
						this.isCollect = res.data.isPetLostCollect === 0 ? false : true
					}
				})
			},
			collectOrCancelPetLost(id){
				this.isCollect = !this.isCollect
				console.log(this.isCollect)
				if(this.isCollect) {
					collectPetLost(id).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '收藏成功！',
								icon: 'success'
							});
						}
					})
				} else {
					cancelCollectPetLost(id).then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '取消收藏成功！',
								icon: 'success'
							});
						}
					})
				}
			},
			goToReport(creator) {
				uni.navigateTo({
					url: '/pages/report/report?creator=' + creator,
				})
			},
			goToUpdateSeeking(id) {
				uni.navigateTo({
					url: '/pages/me/changeMySeekingPetsDetail?id=' + id,
				})
			},
			callCommentSearchData(id) {
				this.$nextTick(() => {
					if (this.$refs.commentRef) {
						this.$refs.commentRef.getData(id, 1);
						this.$refs.commentRef.flag = 1
						this.$refs.commentRef.id = id
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		height: 100%;
	}
</style>
